<#include "/${parameters.templateDir}/xhtml/head.ftl" />
<script src="${base}/struts/xhtml/script/jquery.autocomplete.js" type="text/javascript"></script>
<link rel="stylesheet" href="${base}/struts/xhtml/styles/jquery.autocomplete.css" type="text/css"/>
   <script type="text/javascript">
        $(document).ready(function(){
     		   var displayFields = '${displayFields}'.split(',');
     		   
                $('#${parameters.id?html}').AutoComplete({
                'data': '${base}/${parameters.dataUrl?default("common/autocomplete.do")}',
                'ajaxParams':{'classType':'${parameters.classType}','displayFields':'${parameters.displayFields}','filterSql':'${parameters.filterSql?default('')}'},
                'ajaxDataType': 'json',
                'ajaxType':'POST',
                'width':280,
                'listStyle': 'custom',
                'maxHeight': 480,
                'emphasisHandler': function(keyword, data){
                 //  var regex = RegExp("("+keyword.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1")+")", 'ig');

      			 //  data.realName = data.realName.replace(regex, "<em>$1</em>");
      			 },
      			'matchHandler': function(keyword, data){
      				return true;
        		  //  return data.realName.indexOf(keyword) == 0;  // 匹配规则: 以输入框中的值开头且大小写敏感
     			  },
                'createItemHandler': function(index, data){
                	   var displaySpan = "<span>"
	                   for(var i = 0; i < displayFields.length; i++) {
	                    	displaySpan += data[displayFields[i]]
	                    	
	                    	if(i+1 < displayFields.length){
	                    		displaySpan += "&nbsp;/"
	                    	}
					   }
                 	   displaySpan +=  "</span>";
                
                	   return displaySpan;
                },
                'selectCallBack' : function(inputView, selected){
   					this.inputView.val(selected.attr('realName'));
   					<#if parameters.fieldMapping??>
   						var fieldMapping = ${parameters.fieldMapping};
   						$.each(fieldMapping,function(fieldName, valueName) {
		            		$("#"+fieldName).val(selected.attr(valueName));
		               });
   					</#if>
   					<#if parameters.callBackFun??>
   						${parameters.callBackFun}(inputView, selected);
   					</#if>
                 },
                'noSelectCallBack' : function(inputView){
                	<#if noSelectedClear?? && noSelectedClear =="true">
	                	this.inputView.val("");
	   					<#if parameters.fieldMapping??>
	   						var fieldMapping = ${parameters.fieldMapping};
	   						$.each(fieldMapping,function(fieldName, valueName) {
			            		$("#"+fieldName).val('');
			               });
   						</#if>
                	</#if>
                 }                 
                 
            }).AutoComplete('show');

                        
        });
   	</script>
 

<input type="text"<#rt/>
 name="${parameters.name?default("")?html}"<#rt/>
<#if parameters.get("size")??>
 size="${parameters.get("size")?html}"<#rt/>
</#if>
<#if parameters.maxlength??>
 maxlength="${parameters.maxlength?html}"<#rt/>
</#if>
<#if parameters.nameValue??>
 value="<@s.property value="parameters.nameValue"/>"<#rt/>
</#if>
<#if parameters.disabled?default(false)>
 disabled="disabled"<#rt/>
</#if>
<#if parameters.readonly?default(false)>
 readonly="readonly"<#rt/>
</#if>
<#if parameters.tabindex??>
 tabindex="${parameters.tabindex?html}"<#rt/>
</#if>
<#if parameters.id??>
 id="${parameters.id?html}"<#rt/>
</#if>

<#include "/${parameters.templateDir}/simple/css.ftl" />
<#if parameters.title??>
 title="${parameters.title?html}"<#rt/>
</#if>
<#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
<#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
<#include "/${parameters.templateDir}/simple/dynamic-attributes.ftl" />
/>